<template>
    <h1 ref="title2">222</h1>
    <Person ref="person"/>      
    <button @click="showH2">点我输出</button>
</template>

<script lang="ts" setup name="App">
import Person from './components/Person.vue'
import {ref} from 'vue'
let title2 = ref()
let person = ref()      // ref 放在 组件标签 上，可以拿到组件实例
// 但是这样暴露的组件实例，想要看到其中的属性的话，需要被暴露的组件使用 defineExpose 指定可暴露的内容

function showH2() {
    // 不会和 Person.vue 里面的 h2 标签冲突
    // ref 放在 html 标签上，可以拿到 dom 对象
    // console.log(title2.value)
    console.log(person.value)       
}
</script>

<style>
</style>